JS30 Day 3 筆記

功能

製作一個即使濾鏡的功能，可以調整圖片的內距、模糊程度以及背景顏色，同時讓標題的 JS 兩個字顏色與圖片的背景顏色相同

Demo

step 1 : 定義並套入 CSS 變數

CSS 的前處理器（例如：SCSS 或 SASS），在建立 CSS 檔案前已將變數替換為實際的數值，因此無法透過 Javascript 去改變 CSS 前處理器中的變數。

而在原生的 CSS 中使用變數，優點是可以透過 Javascript 動態改變變數的數值，缺點是有些瀏覽器的版本尚未支援

// 建立 CSS 的變數
//：root{
//   --<varName>:<varValue>
// }

:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

// 使用 CSS 的變數 : var(--<varName>)
img{
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}

// 讓標題的 JS 的顏色與圖片背景顏色相同
.hl{
color: var(--base);
}

step 2 : JS 監聽 input 元素，並更新 CSS 效果

1. 取得頁面中的 input 元素，並在每個 input 元素掛上監聽事件 （change、mousemove）

// 取得頁面中的 input 元素
const inputs = document.querySelectorAll('.controls input')

// 對每個 input 元素監聽 change 事件 
inputs.forEach(input=>{
  input.addEventListener('change', handleChange)
})

// 對每個 input 元素監聽 mousemove 事件 
// 尤其像 input type = "color" ，就不會發生 change 事件)
inputs.forEach(input=>{
 input.addEventListener('mousemove',handleChange)
})

1. 建立 function handleChange

function handleChange(){
  // 取得參數值的單位，如果沒有單位，設為空
  const suffix = this.dataset.sizing || ''

  // 設置 CSS 屬性
  // this.name : 參數的名稱
  // this.value : 參數的值
  // suffix : 參數的單位
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
}

HTML

利用 data-* 設置單位值 （因為有的 input 有單位，有的則沒有）

// 有單位的 input， 在標籤中設置：data-sizing: px
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input id="base" type="color" name="base" value="#ffc600">

CSS

filter

CSS 的 filter 濾鏡可以將模糊或颜色偏移等效果用於元素
filter:blur() => 高斯模糊，數值越小越清楚，越大越模糊

Javascript

1. NodeList 和 Array 區別

兩者區別在於可以使用的方法不同

• NodeList 可以操作的方法有forEach()、keys()、length 等
• Array 可以操作的方法除了上述之外，還包括 map()、filter()、pop()...

2. dataset

用 dataset 與getAttribute 都可以取得 data-* 屬性，

// html
<div id="getdata" data-info="hello" data-number="888"></div>

// javascript
document.querySelector('#getdata').dataset.info // 輸出 hello
document.querySelector('#getdata ').getAttribute('data-number'); // 輸出 888

3. 利用 dataset.sizing 取得單位值

HTML

// 有單位的 input， 在標籤中設置：data-sizing: px
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input id="base" type="color" name="base" value="#ffc600">

Javascript

// 用 dataset 取得該標籤中所有的 data-*， 
// 而 dataset.sizing 意謂著取得 data-sizing 的值
// 如果有的話就將 suffix 賦予此值，如果沒有的話為空
const suffix = this.dataset.sizing || '';

4. 用 Javascript 改變 CSS 屬性 : style.setProperty

取得頁面的根元素：document.documentElement、 document.querySelector('html')、document.querySelector(':root')

// 改變全域 CSS 變數的值
document.documentElement.style.setProperty('--base', '#000');

參考資料：

• Woah! CSS Variables?! — #JavaScript30 3/30 @Wes Bos
• [Alex 宅幹嘛] 👨‍💻 深入淺出 Javascript30 快速導覽：Day 3：Playing with CSS Variables and JS @Alex 宅幹嘛
• 03 - CSS Variables @guahsu
• 03 CSS Variable@soyaine
• [JS30] Day03: CSS Variables@PJCHENder